<template>

  <div style="width: 100%;height: 100%;">
    <el-dialog title="提示" :visible.sync="dialogVisible" width="23%">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item v-show="!this.form.parentId" label="角色名称:" prop="name">
          <el-input v-model="form.name" style="width: 100%;" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item v-show="!this.form.parentId" label="代码" prop="code" >
          <el-input v-model="form.code" style="width: 100%;" placeholder="请输入角色代码"></el-input>
        </el-form-item>
        <el-form-item v-show="this.form.parentId" label="角色权限:" prop="permissionCode"><strong></strong>
          <el-select style="width: 100%;" v-model="form.permissionCode" placeholder="请选择">
            <el-option v-for="item in permissions" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编号:" prop="idx1">
          <el-input-number v-model="form.idx1" style="width: 100%;" controls-position="right" @change="handleChange"
            :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
    <el-row>
      <el-button-group>
        <el-button size="small" type="info" icon="el-icon-plus" @click="add">新增</el-button>
        <el-button size="small" type="info" icon="el-icon-edit" @click="edit" :disabled="!row">修改</el-button>
        <el-button size="small" type="info" icon="el-icon-delete" @click="del" :disabled="!row">删除</el-button>
        <el-button size="small" type="infor" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </el-button-group>
    </el-row>
    <el-table :data="tableData" highlight-current-row ref="table"
      style="width: 100%;height:auto margin-bottom: 20px;margin-top: 15px;" row-key="id" border
      @current-change="changeRow" default-expand-all :tree-props="{children: 'nodes', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column prop="code" label="代码">
      </el-table-column>
      <el-table-column prop="idx1" label="编号">
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
  import selectTree from '../../components/selectTree.vue'
  export default {
    components: {
      selectTree
    },
    name: 'treeTable',
    data() {
      return {
        tableData: undefined,
        row: undefined,
        dialogVisible: false,
        form: {},
        options: [],
        value: undefined,
        permissions: [],
        rules:{},
        rules1: {
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }],
          idx1: [{
            required: true,
            message: '编号必选',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '代码必选',
            trigger: 'blur'
          }],
        },
        rulesGHQ:{
          code: [{
            required: true,
            message: '代码必选',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }],
          idx1: [{
            required: true,
            message: '编号必选',
            trigger: 'blur'
          }],
        },
        rulesGHQ2:{
          idx1: [{
            required: true,
            message: '编号必选',
            trigger: 'blur'
          }],
          permissionCode: [{
            required: true,
            message: '编号必选',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      changeRow(row) {
        this.row = row;
      },
      handleChange(val) {
        if (val == undefined) {
          this.form.idx1 = 1;
        }
      },
      getValue(value) {
        console.log(value);
        this.form.parentId = value;
      },
      add() {
        console.log(this.row);
        this.rules = this.rulesGHQ
        if (this.row) {
          if(this.row.parentId){
            this.$notify({
              message: '最多有二级权限',
              type: 'warning',
              position: 'bottom-right'
            });
              return
          }
          this.rules = this.rulesGHQ2
          this.form = {
            "parentId": this.row.id
          }
        }
        this.dialogVisible = true
      },
      edit() {
        if(this.row.parentId){
          this.$notify({
            message: '请到权限管理修改',
            type: 'warning',
            position: 'bottom-right'
          });
            return
        }
        this.dialogVisible = true
        this.form = deepClone1(this.row)
        this.value = this.form.parentId
        let opts = deepClone1(this.tableData)
         this.rules =this.rules1
      },
      del() {
        this.$confirm('确认删除？').then(_ => {
          this.$ajax.post('role/delete', this.row).then(res => {
            let result = res.data;
            if (result.success) {
              this.updateTable()
              this.$notify({
                title: '成功',
                message: result.msg,
                type: 'success',
                position: 'bottom-right'
              });
            }else{
              this.updateTable()
              this.$notify({
                title: '警告',
                message: '该记录已绑定用户',
                type: 'warning',
                position: 'bottom-right'
              });
            }

          }).catch(errors => {
            this.$message.error(
              '网络连接失败......'
            );
          })
        })
      },
      refresh(row) {
        this.form.parentId = null
        this.updateTable()
        this.$refs.table.setCurrentRow(row);
        this.row = null;
        this.$notify({
          title: '成功',
          message: "刷新成功",
          type: 'success',
          position: 'bottom-right'
        });
      },
      qx() {
        this.empty();
      },
      empty() {
        this.dialogVisible = false;
        this.options = undefined
        this.form = {}
        this.$refs.table.setCurrentRow()
        this.value = undefined
      },
      getPermission() {
        this.$ajax.post("permission/list", {}).then(res => {
          this.permissions = res.data.data
        })
      },
      save() {
        if (this.parentId === null) {
          this.parentId = '';
        }
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$ajax.post('role/save2', this.form).then(res => {
              let result = res.data;
              this.updateTable()
              if (result.success) {
                this.$notify({
                  title: '成功',
                  message: result.msg,
                  type: 'success',
                  position: 'bottom-right'
                });
                this.empty()
              }else{
                this.$notify({
                  title: '警告',
                  message: result.msg,
                  type: 'warning',
                });
                this.empty()
              }
            })
          }
        })
      },
      updateTable() {
        this.options = []
        this.$ajax.post('role/combotree', {}).then(res => {
          let result = res.data;
          if (result.success) {
            this.tableData = result.data;
            for (let i = 0; i < result.data.length; i++) {
              if (result.data[i].parentId == "" || result.data[i].parentId == null) {
                this.options.push(result.data[i])
              }
            }
          }
        })
      }
    },
    mounted() {
      this.updateTable();
    },
    created() {
      this.getPermission();
    }
  }

  function deepClone1(obj) {
    //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
    var objClone = Array.isArray(obj) ? [] : {};
    //进行深拷贝的不能为空，并且是对象或者是
    if (obj && typeof obj === "object") {
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key] && typeof obj[key] === "object") {
            objClone[key] = deepClone1(obj[key]);
          } else {
            objClone[key] = obj[key];
          }
        }
      }
    }
    return objClone;
  }
</script>

<style>
</style>
